<template id="shopEvaluate">
    <div id="shopEvaluate_2">
        <div id="shopEvaluate_1">
        <div class="shopEvaluate_top">
            <span>{{data.all_percent}}%</span>
            <p>口感 <i class="icon iconfont icon-xing"></i><i class="icon iconfont icon-xing"></i><i class="icon iconfont icon-xing"></i><i class="icon iconfont icon-xing"></i><i class="icon iconfont icon-xing"></i></p>
            <p>颜值 <i class="icon iconfont icon-xing"></i><i class="icon iconfont icon-xing"></i><i class="icon iconfont icon-xing"></i><i class="icon iconfont icon-xing"></i><i class="icon iconfont icon-xing"></i></p>
        </div>
        <div class="shopEvaluate_all">
            <ul>
                <li><span @click="getComment(0)"></span>
                    全部<time>({{data.comment_num}})</time>
                </li>
                <li>
                    <span @click="getComment(1)"></span>
                    有内容<time>({{data.not_img_num}})</time>
                </li>
                <li>
                    <span @click="getComment(2)"></span>
                    有图片<time>({{data.img_num}})</time>
                </li>
            </ul>
        </div>
        <div class="shopCar_te">
            <div class="shopEvaluate_ping" v-for="v in comment_list">
                <p><span>{{v.nickname}}</span><span>{{v.comment_time}}</span></p>
                <p>口感<time>{{v.taste_rank}}</time>  颜值<time>{{v.facade_rank}}</time></p>
                <p>{{v.content}}</p>
                <img src="v.headimg" alt="">
            </div>
        </div>
        <div class="commodity_more" v-show="data.page < data.page_count">
            <p @click="getMore();">加载更多</p>
        </div>
        </div>
       <!-- <v-shopCar></v-shopCar>-->
    </div>
</template>
<script>
    /*import shopCar from './shopCar.vue';*/
    export default{
        name: 'shopEvaluate',
        components:{
           /* 'v-shopCar':shopCar,*/
        },
        data() {
            return {
                id:this.$route.query.goods_id,
                data:[],
                comment_list:[]
            }
        },
        mounted:function () {
            let H = $(window).height()-60
            $('#shopEvaluate_1').height(H)
            this.commentList(0);
        },
        methods:{
            getComment:function (type) {
                this.commentList(type);
            },
            commentList:function (type, page=1) {
                this.$http.jsonp(
                    this.GLOBAL.BaseUrl+'/mobile/api/v1/Goods.php?mode=commentList',
                    {params:{goods_id:this.id, type:type, page:page}, jsonp:'callback'}
                ).then(function(res){

                    if (res.body.code != 200) {
                        alert(res.body.msg);
                        return false;
                    }

                    if (page > 1) {
                        if (res.body.code == 200) {

                            this.comment_list = this.comment_list.concat(res.body.data.comment_list);
                            this.data.type = res.body.data.type;
                            this.data.page = res.body.data.page;
                            this.data.page_count = res.body.data.page_count;
                        }
                        return false;
                    } else {
                        this.data=res.body.data;
                        this.comment_list = res.body.data.comment_list;
                    }
                });
            },
            getMore:function () {
                if (this.data.page >= this.data.page_count) {
                    return false;
                }

                this.commentList(this.data.type, parseInt(this.data.page) + 1);
            }
        }
    };

</script>
<style>
    #shopEvaluate_2{
        overflow-x: hidden;
    }
    .shopCar_te{
        min-height: 8.6rem;
    }
    .shopEvaluate_ping p:nth-of-type(1){
        width:100%;
        height:0.52rem;
    }
    .shopEvaluate_ping img{
        position:absolute;
        display:block;
        border-radius:50%;
        width:0.65rem;
        height:0.64rem;
        left:0.3rem;
        top:0.26rem;
    }
    .shopEvaluate_ping p:nth-of-type(3){
        width:100%;
        height:0.3rem;
        color:#313131;
        font-size:0.22rem;
        line-height:0.3REM;
        text-indent: 0.25rem;
    }
    .shopEvaluate_ping p:nth-of-type(2){
        width:100%;
        height:0.57rem;
        color:#aeaeae;
        font-size:0.17rem;
        text-indent: 0.25rem;
        line-height:0.57rem;
    }
    .shopEvaluate_ping p:nth-of-type(1) span:nth-of-type(2){
        float:right;
        width:1.76rem;
        height:0.52rem;
        line-height:0.52rem;
        text-align:center;
        color:#868686;
        font-size:0.19rem;

    }
    .shopEvaluate_ping p:nth-of-type(1) span:nth-of-type(1){
        float:left;
        height:0.52rem;
        width:3.24rem;
        line-height:0.52rem;
        /* text-align:center;*/
        text-indent: 1.04rem;
        color:#313131;
        font-size:0.16rem;
        overflow: hidden; /*!*自动隐藏文字*!*/
        text-overflow: ellipsis;/*!*文字隐藏后添加省略号*!*/
        white-space: nowrap;/*!*强制不换行*!*/
    }
    .shopEvaluate_ping{
        width:100%;
        height:1.64rem;
        border-top:1px solid #e6e6e6;
        padding-top:0.36rem;
        position:relative;
    }
    .shopEvaluate_all ul li span{
        display:block;
        position:absolute;
        width:0.24rem;
        height:0.23rem;
        border:1px solid #b8b8b8;
        border-radius:50%;
        top:0.18rem;
        text-decoration:none;
    }
    .shopEvaluate_all ul li{
        list-style:none;
     float:left;
        width:1.78rem;
        height:0.62rem;
        line-height:0.62rem;
        text-align:center;
        color:#a6a6a6;
        font-size:0.2rem;
        position:relative;
    }
    .shopEvaluate_all ul{
        width:100%;
        height:0.62rem;
        margin-left:0.24rem;
    }
    .shopEvaluate_all{
        width:100%;
        height:0.62rem;
    }
    .shopEvaluate_top p:nth-of-type(1){
        width:4.47rem;
        height:0.35rem;
        line-height:0.35rem;
        color:#434343;
        font-size:0.17rem;
        text-indent: 0.82rem;
        position:absolute;
        left:1.94rem;
        top:0.22rem;
    }
    .shopEvaluate_top p:nth-of-type(1) i{
        color:#fe7b01;
        margin:0 0.05rem;
    }
    .shopEvaluate_top p:nth-of-type(2) i{
        color:#fe7b01;
        margin:0 0.05rem;
    }
    .shopEvaluate_top p:nth-of-type(2){
        width:4.47rem;
        height:0.35rem;
        line-height:0.35rem;
        color:#434343;
        font-size:0.17rem;
        text-indent: 0.82rem;
        position:absolute;
        left:1.94rem;
        top:0.67rem;
    }
    .shopEvaluate_top span{
        position:absolute;
        width:1.04rem;
        height:0.83rem;
        background:#ffd1a6;
        color:#fe7b01;
        text-align:center;
        line-height:0.83rem;
        border-radius:0.3rem;
        font-size:0.2rem;
        left:0.9rem;
        top:0.22rem;
    }
    .shopEvaluate_top{
        height:1.24rem;
        width:100%;
        position:relative;
        border-bottom:0.1rem solid #f5f4f2;
    }

    .commodity_more{
        width:100%;
        height:0.85rem;
    }
    .commodity_more p{
        margin:auto;
        width:1.61rem;
        height:0.42rem;
        line-height:0.42rem;
        text-align:center;
        color:#313131;
        border:1px solid #313131;
        font-size:0.2rem;
        border-radius:0.2rem;
    }
</style>
